<template>
  <div class="main">
    <el-form>
      <el-form-item>
        <el-input v-model.trim="inputValue" placeholder="请输入内容"></el-input>
      </el-form-item>
      <el-button type="primary" @click="handleClick">查询</el-button>
    </el-form>
    <Table :list='courseList' :editClick='editClick' :deleteHandle='deleteHandle' />
    <Pagination :currentChange="currentChange"></Pagination>
  </div>
  <EditPop :popShow="popShow" v-if='popShow' :message='courseItemState.message' :confirmClick='confirmClick' />
</template>
<script setup>
import Table from './Table.vue'
import EditPop from './EditPop.vue'
import Pagination from './Pagination.vue'
import { reactive, ref, computed, onMounted } from 'vue'
import { getCourse, changeCourse, deleteCourse } from '../api/index';
import emitter from '../utils/eventBus'

/**
 * 初始化的数据
 */
const data = reactive({
  list: [],
  page: 1,//默认展示第一页
  total: 15, //课程总数
  sideCategory: 'front' //课程的分类
})
/**
 * 课程列表数据获取和课程类目切换逻辑
 */
const getCourseData = async (query) => {
  const category = query?.category || data.sideCategory
  const page = query?.page || 1
  const size = query?.size || 5
  const res = await getCourse({ category, page, size })
  //筛选符合分类的课程
  data.list = res?.list.filter((item) => (item.category === category))
  data.total = res.total
}
onMounted(() => {
  getCourseData()
  /**
   * 监听课程类目tab切换
   */
  emitter.on('course', (val) => {
    data.sideCategory = val
    data.page = 1
    getCourseData({ category: val, page: 1 })
  })
})



/**
 * 分页的逻辑
 */
const currentChange = (val) => {
  if (val === 'pre') {
    if (data.page > 1) {
      data.page--
    } else {
      ElMessage({
        message: '已经是第一页了！！！',
        type: 'warning',
        showClose: true
      })
    }
  }
  if (val === 'next') {
    if (data.page < Math.ceil(data.total / 5)) {
      data.page++
    } else {
      ElMessage({
        message: '已经是最后一页了！！！',
        type: 'warning',
        showClose: true
      })
    }
  }
  //请求课程的接口
  getCourseData({ category: data.sideCategory, page: data.page })
}



/**
 * 搜索框的逻辑
 */
const inputValue = ref('')
//搜索的逻辑
const courseList = computed(() => {
  return data.list?.filter((item) => {
    return item.title.indexOf(inputValue.value) >= 0
  })
})
//搜索的按钮
const handleClick = () => {
  if (inputValue.value) {
    ElMessage({
      message: '查询成功',
      type: 'success'
    })
  } else {
    ElMessage({
      message: '请输入搜索内容',
      type: 'error'
    })
  }
}




/**
 * 课程编辑的逻辑
 */
//课程修改接口调用

const changeCourseData = async(query)=>{
  const {title,price,id} = query
  const res = await changeCourse({title,price,id})
  if(res?.message){
    ElMessage({
      message:res.message,
      type:'success'
    })
  }




}





//编辑的数据
const courseItemState = reactive({
  message: {}
})
//控制编辑弹窗的展示变量
const popShow = ref(false)
//控制编辑弹窗的展示方法
const isShowPop = (show) => {
  popShow.value = show
}
//编辑的按钮
const editClick = (val) => {
  isShowPop(true)
  courseItemState.message = val
}
//取消和确认按钮逻辑
const confirmClick = (val) => {
  if (val === 'cancel') {
    isShowPop(false)
  } else if (val.title !== courseItemState.message.title || val.price !== courseItemState.message.price) {
    //更改对应课程的title或者price
    data.list.map((item) => {
      if (item.id === val.id) {
        item.title = val.title
        item.price = val.price
      }
    })
    //关闭弹窗
    isShowPop(false)
    //修改接口的调用
    changeCourseData({title: val.title, price: val.price, id: val.id})





  } else {
    ElMessage({
      showClose: true,
      message: '没发现有更改的内容',
      type: 'warning'
    })
  }
}

/**
 * 课程删除的逻辑
 */

//删除的接口

const deleteCourseData = async (query)=>{
  const res = await deleteCourse ({id: query})
  if(res?.message){
    ElMessage({
      message:res.message,
      type:'success'
    })
  }
  //当前页的数据清零时重置到第一页
  if(data.list.length === 0&&data.page>1){
    getCourseData({category:data.sideCategory,page:1})
  }


}




const deleteHandle = (val) => {
  if (val) {
    data.list = data.list.filter((item) => {
      return item.id !== val
    })
    //删除接口的调用
    deleteCourseData(val)
  }
}


</script>
<style lang='less' scoped>
.el-form {
  display: flex;
}

.main {
  background-color: #fff;
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;

  .input-with-select {
    width: 400px;
    margin-bottom: 40px;
  }
}

:deep(.el-table__header-wrapper) {
  position: fixed;
  z-index: 20;
}

:deep(.el-table__inner-wrapper) {
  overflow: hidden;
}

:deep(.el-table__body-wrapper) {
  margin-top: 40px;
}

:deep(.el-input__inner) {
  width: 300px;
  margin-right: 10px;
}

:deep(.warning-row) {
  --el-table-tr-bg-color: var(--el-color-warning-light-9) !important;
  height: 140px !important;
}

.table {
  height: 80vh;
  width: 85vw;
  overflow: hidden;
  overflow-y: scroll;
}

.table::-webkit-scrollbar {
  display: none
}
</style>